<template>
  <div class="lookup">
    <MyHeader />
    <div>
      <div class="lookup_select">
         <Input v-model="text" placeholder="请输入关键字检索经营范围表述" @keydown="searchKey">
         <Button slot="append" icon="ios-search" @click="remoteMethod2"></Button>
         </Input>
         <ul class="box" v-if="isSearchText">
           <li class="title" v-for="(option, index) in resultList" :key="index" >
             <p v-html="option.title" @click="isSelect(option)"></p>
             <!--<div class="son" v-if="option.son" v-for="(item,i) in option.son" :key="i" >-->
              <!--<p v-on:click="isSelect(item)" v-html="item.title"></p>-->
             <!--</div>-->
           </li>
         </ul>
      </div>
      <div class="lookup_category">
        <span>
          <em>标准经营范围</em>
        </span>
        <span>
          <em>许可经营范围</em>
        </span>
        <span>
          <em>手动输入</em>
        </span>
      </div>
      <div class="lookup_keyword">
        <div class="bzTit" v-for="(item,index) in bzList" :key="index">
          <span>{{item.text}}</span>
          <i @click="delBzList(index)" class="ivu-icon"></i>
        </div>
        <div class="xkTit" v-for="(tmp,i) in xkList" :key="i">
          <span>{{tmp.text}}</span>
          <i @click="delXkList(i)" class="ivu-icon"></i>
        </div>
      </div>
      <div class="lookup_custom">
        <div class="lookup_custom-title">
          如果选出的经营范围不能满足您的要求，您可以手动输入最终以工商机关核定为准。<br/>
          <!--（目前微信端只提供20字内手动输入，如你业务需求较大请到电脑版网上登录进行业务申请）-->
        </div>
        <Input type="textarea" :maxlength="100" v-model="sdStr">
        </Input>
      </div>
      <div class="lookup_info">
        <div class="lookup_info-title">根据您输入的信息生成的经营范围表述如下:</div>
        <div class="lookup_info-border">
          {{bzStr}}
          <span v-if="bzStr">{{(xkStr || sdStr) ? '；' : '。'}}</span>
          {{xkStr}}
          <span v-if="xkStr">{{sdStr ? '；' : '。'}}</span>
          {{sdStr}}{{sdStr ? '。' : ''}} <br/>
          （{{opsuffix1}}{{xkStr ? (xkStr + '以及') : xkStr}}{{opsuffix2}}。）
        </div>
      </div>
    </div>
    <div class="lookup_bottom">
      <div class="bottom">
    <Button type="warning" @click="saveInfo">保存</Button>
    <Button type="primary" @click="gotoNext">下一步</Button>
  </div>
      <MyFooter />
    </div>
  </div>
</template>

<script>
  import MyHeader from '../../components/MyHeader.vue'
  import MyFooter from '../../components/MyFooter.vue'
  import request from '../../utils/request'
  export default {
    data() {
      return {
        text: '',
        isSearchText: false,
        resultList: [],
        bzList: [],
        xkList: [],
        bzStr: '',
        xkStr: '',
        sdStr: '',
        opsuffix1: '企业依法自主选择经营项目，开展经营活动；',
        opsuffix2: '依法须经批准项目，经相关部门批准后依批准的内容开展经营活动；不得从事本市产业政策禁止和限制类项目的经营活动'
      }
    },
    methods: {
      queryScope() {
         request.get('/interface/apply/cp/setup/queryScope.do', {'gid': sessionStorage.getItem('gid')}
        ).then(response => {
          if (response.data.result === 'error') {
            this.$ErrorAlert(response.data.message)
            return null
          }
          // 成功逻辑
           this.bzStr = response.data.data.cbuitem || ''
           this.bzStr = (this.bzStr.endsWith('；') || this.bzStr.endsWith('。')) ? this.bzStr.substr(0, this.bzStr.length - 1) : this.bzStr
           this.xkStr = response.data.data.abuitemco || ''
           this.xkStr = (this.xkStr.endsWith('；') || this.xkStr.endsWith('。')) ? this.xkStr.substr(0, this.xkStr.length - 1) : this.xkStr
           this.sdStr = response.data.data.opcustom || ''
           this.sdStr = (this.sdStr.endsWith('；') || this.sdStr.endsWith('。')) ? this.sdStr.substr(0, this.sdStr.length - 1) : this.sdStr
           let scopejson = JSON.parse(response.data.data.scopejson)
           let scopeIdArray = scopejson ? scopejson.scopeIdArray : []
           for (let i in scopeIdArray) {
             if (scopeIdArray[i].licflag === 'normal') {
               this.bzList.push(scopeIdArray[i])
             } else {
               this.xkList.push(scopeIdArray[i])
             }
           }
        })
      },
      searchKey(event) {
        if (event.keyCode === 13) { // 如果按的是enter键 13是enter
          this.remoteMethod2()
        }
      },
      remoteMethod2() {
        if (this.text) {
          this.$ErrorAlert('请输入关键字搜索')
        }
        request.get('/interface/apply/cp/setup/queryScopeWords.do', { keywords: this.text })
        .then(response => {
          if (response.data.result === 'error') {
            this.$ErrorAlert(response.data.message)
            return null
          }
          let data = response.data.data
          if (data.length === 0) {
            this.$ErrorAlert('搜索结果为空')
            return null
          }
          for (let i = 0; i < data.length; i++) {
            data[i].title = data[i].scopetext.replace(this.text, '<span style="color:red">' + this.text + '</span>')
          }
          this.resultList = data
          this.isSearchText = true
        })
      },
      isSelect(val) {
        let tmp = {
          scopeId: val.scopeid,
          licflag: val.licflag === '3' ? 'postlic' : 'normal',
          suffixflag: '2',
          mainflag: '2',
          text: val.scopetext
        }
        if (tmp.licflag === 'postlic') {
          if (JSON.stringify(this.xkList).indexOf(JSON.stringify(tmp)) !== -1) {
            this.$ErrorAlert('该经营范围项已经被选中，请勿重复操作')
            return false
          }
          this.xkStr += (this.xkList.length !== 0 ? ('、' + tmp.text) : tmp.text)
          this.xkList.push(tmp)
        } else {
          if (JSON.stringify(this.bzList).indexOf(JSON.stringify(tmp)) !== -1) {
            this.$ErrorAlert('该经营范围项已经被选中，请勿重复操作')
            return false
          }
          this.bzStr += (this.bzList.length !== 0 ? ('、' + tmp.text) : tmp.text)
          this.bzList.push(tmp)
        }
        this.isSearchText = false
      },
      delBzList(index) {
        this.bzList.splice(index, 1)
        this.bzStr = ''
        for (let i = 0; i < this.bzList.length; i++) {
          this.bzStr += (i !== 0 ? ('、' + this.bzList[i].text) : this.bzList[i].text)
        }
      },
      delXkList(index) {
        this.xkList.splice(index, 1)
        this.xkStr = ''
        for (let i = 0; i < this.xkList.length; i++) {
          this.xkStr += (i !== 0 ? ('、' + this.xkList[i].text) : this.xkList[i].text)
        }
      },
      async save(isNext) {
        if (this.bzList.length === 0 && this.xkList.length === 0 && this.sdStr === '') {
          this.$ErrorAlert('未录入任何信息，无法保存')
          return
        }
        let scopeIdArray = this.bzList.concat(this.xkList)
        let postData = new FormData()
        postData.append('scopeIdArray', JSON.stringify(scopeIdArray))
        let response = await request.post('/interface/apply/cp/setup/queryLicList.do', postData)
        if (response.data.result === 'error') {
          this.$ErrorAlert(response.data.message)
          return false
        }
        let licList = response.data.data
        let licStr = ''
        for (let r in licList) {
          licStr += '、' + licList[r].licmettercn + '【' + licList[r].licanth + '】'
        }
        this.$Modal.confirm({
          title: '经营许可文件提醒',
          content: '<p>根据您所选经营范围，系统自动计算出您后续需办理的经营许可文件:' + licStr.substr(1) + '，请确定是否继续？</p>',
          onOk: () => {
            let scopeForm = {}
            scopeForm.gid = sessionStorage.getItem('gid')
            scopeForm.pripid = sessionStorage.getItem('pripid')
            scopeForm.scopejson = JSON.stringify({scopeIdArray: scopeIdArray})
            scopeForm.opsuffix = '（' + this.opsuffix1 + (this.xkStr ? (this.xkStr + '以及') : '') + this.opsuffix2 + '。）'
            scopeForm.opcustom = this.sdStr + (this.sdStr ? '。' : '')
            scopeForm.abuitemco = this.xkStr + (this.xkStr ? (this.sdStr ? '；' : '。') : '')
            scopeForm.cbuitem = this.bzStr + (this.bzStr ? ((this.xkStr || this.sdStr) ? '；' : '。') : '')
            scopeForm.opscope = scopeForm.cbuitem + scopeForm.abuitemco + scopeForm.opcustom + scopeForm.opsuffix
            postData = new FormData()
            postData.append('scopeForm', JSON.stringify(scopeForm))
            request.post('/interface/apply/cp/setup/saveScope.do', postData
            ).then(response => {
              if (response.data.result === 'error') {
                this.$ErrorAlert(response.data.message)
              } else if (response.data.result === 'success') {
                if (isNext) {
                  this.$router.push({name: 'InvestorList'})
                } else {
                  this.$SuccessAlert('保存成功')
                }
              }
            })
          }
        })
      },
      saveInfo() {
        this.save(false)
      },
      gotoNext() {
        this.save(true)
      }
    },
    mounted() {
      this.queryScope()
    },
    components: {
      MyHeader,
      MyFooter
    }
  }

</script>

<style lang="scss">
  .lookup {
    position: relative;
    min-height: 100%;
    padding-bottom: 4rem;
    >div {
      &:nth-child(2) {
        padding: 0.57rem;
      }
    }
    &_select {
      position: relative;
      .box{
        max-height: 85vh;
        overflow-y: auto;
        line-height: 1rem;
        .title{
          font-size: .90rem;
          border-bottom: 1px solid rgb(112, 110, 110);
        }
        .son{
          font-size: .64rem;
            margin-left: 2em;
            border-top: 1px solid rgb(112, 110, 110);
          }
      }
      &-icon {
        position: absolute;
        top: 0.25rem;
        right: 0.43rem;
        font-size: 0.72rem;
        color: #aaa;
        z-index: 10;
      }
      .ivu-select {
        &-selection {
          border-radius: 1.22rem;
          height: 1.22rem;
          line-height: 1.22rem;
          background: #f3f3f3;
          border: none;
          input {
            padding-left: 1.25rem;
            height: 1.22rem;
            line-height: 1.22rem;
            font-size: 0.5rem;
            &::-webkit-input-placeholder {
              color: #aaa;
              font-size: 0.5rem;
            }
            &::-moz-placeholder {
              color: #aaa;
              font-size: 0.5rem;
            }
            &:-ms-input-placeholder {
              color: #aaa;
              font-size: 0.5rem;
            }
          }
        }
      }
    }
    &_category {
      padding: 0.32rem 0;
      span {
        font-size: 0.43rem;
        &::before {
          content: '';
          display: inline-block;
          width: 0.32rem;
          height: 0.32rem;
          border-radius: 50%;
        }
        &:nth-child(1) {
          color: #7ed321;
          &::before {
            background-color: #7ed321;
          }
        }
        &:nth-child(2) {
          color: #f5a623;
          &::before {
            background-color: #f5a623;
          }
        }
        &:nth-child(3) {
          color: #d0021b;
          &::before {
            background-color: #d0021b;
          }
        }
        em {
          margin-left: 0.16rem;
        }
      }
    }
    &_keyword {
      border-bottom: 1px solid #ccc;
      padding-bottom: 0.32rem;
      .bzTit{
          background: #7ed321;
        }
        .xkTit{
          background: #f5a623;
        }
      >div {
        margin: 0.16rem;
        position: relative;
        display: inline-block;
        padding: 0 1.44rem 0 0.28rem;
        width: 90%;
        height: 1.2rem;
        line-height: 1.2rem;
        border-radius: 5px;
        font-size: 0.5rem;
        cursor: pointer;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;;
        span {
          color: #fff;
        }
        i {
          position: absolute;
          right: 0;
          top: 0;
          display: inline-block;
          height: 1.2rem;
          width: 1.2rem;
          background: rgba(0, 0, 0, 0.4);
          border-radius: 5px;
          &::before {
            position: absolute;
            content: "\F128";
            font-size: 0.7rem;
            color: #fff;
            top: 50%;
            left: 50%;
            transform: translate3d(-50%, -50%, 0);
          }
        }
      }
    }
    &_info {
      font-size: 0.5rem;
      p {
        margin: 0.32rem 0;
        padding-bottom: 0.32rem;
        font-size: 0.43rem;
        color: #aaa;
        border-bottom: 1px solid #ccc;
      }
      &-title {
        margin: 0.32rem 0;
        border-bottom: none;
      }
      &-border {
        padding: 0.57rem 0.54rem;
        background: #f7fdf0;
        border: 1px solid #7ed321;
        border-radius: 0.2rem;
      }
    }
    &_custom {
      border-bottom: 1px solid #ccc;
      padding-bottom: 0.5rem;
      font-size: 0.5rem;
      p {
        margin: 0.32rem 0;
        padding-bottom: 0.32rem;
        font-size: 0.43rem;
        color: #aaa;
        border-bottom: 1px solid #ccc;
      }
      &-title {
        margin: 0.32rem 0;
        border-bottom: none;
      }
    }
    &_bottom {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 3.5rem;
    }
  }
.bottom {
    display: flex;
    justify-content: space-around;
    // padding: 0.54rem;
    button {
      width: 45%;
      padding-top: 0.36rem;
      padding-bottom: 0.36rem;
      font-size: 0.57rem;
    }
  }
</style>
